<template>
  <div id="popupbody" v-if="dialogVisible">
    <div class="popupbody-box" ref="dialogBox">
      <div class="popupbody-title">
        <span>分配管理</span>
        <span class="el-icon-close" @click="closePOpup"></span>
      </div>
      <div class="popupbody-boxin" style="padding:5px;">
        <div class="applybody">
          <div class="applybody-title" v-if="applydetail">
            申请班级：<span>{{ applydetail.classes ? applydetail.classes.class_name : '无记录' }}</span>，
            申请教师：<span>{{ applydetail.user.realname }}</span>
          </div>
          <div class="applybody-title-goods" v-if="applydetail">
            申请物料：<span>{{ applydetail.tools.name }}</span>,
            申请数量：<span>{{ applydetail.number }}</span>
          </div>
          <h2 class="h2box">
            <span>物料位置</span>
            <el-button size="small" plain @click="submitCheckedFn" type="primary">
              确认此条分配
            </el-button>
          </h2>
          <div class="table-body">
            <div class="table-body-box">
              <el-table
                ref="multipleTable"
                :data="teachlist"
                :stripe="tableStripe"
                :border="tableBorder"
                tooltip-effect="dark"
                style="width: 100%"
                header-cell-class-name="table-text-c"
                cell-class-name="table-text-c">
                <el-table-column
                  label="教具位置">
                  <template slot-scope="scope">
                    {{ scope.row.class_id == 0 ? '总仓' : scope.row.classes.class_name }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="num"
                  label="拥有数量"
                  width="160">
                </el-table-column>
                <el-table-column
                  label="分配数量">
                  <template slot-scope="scope">
                    <el-input auto-complete="off" placeholder="填写分配数量" v-model="numberList[scope.$index]"></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <!--工具条-->
          <el-col :span="24" class="toolbar">
            <el-pagination
              background
              layout="total, prev, pager, next"
              :total="page.total"
              :page-size="page.pagesize"
              @current-change="handleSizeChange">
            </el-pagination>
          </el-col>
        </div>
      </div>
      <div class="popupbody-footer">
        <el-button size="small" @click="closePOpup">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api.js'
import {pagination} from '@/utils/util.js'

export default {
  props: ['visible', 'detailId', 'pageType'],
  data() {
    return {
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      pageId: this.detailId,
      applydetail: null,
      applydetail_type: this.pageType, // apply 申请页面进入的 checked 分配页面进入的
      editFormVisible: false,
      teachingList: [],
      applyBox: null,
      dialogTitle: '',
      applyIndex: null,
      teachlist: [],
      numberList: [],
      flag: true,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      dialogVisible: false
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        this.detailFn()
      } else {
        this.page.pageindex = 1
        this.teachlist = []
      }
    }
  },
  created() {
  },
  methods: {
    detailFn() {
      this.$fetch(api.tools_apply_detail, {id: this.detailId}).then((response) => {
        console.log('数据：', response)
        if (response.code === 0) {
          this.applydetail = response.list
          this.InitFn()
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // index分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    InitFn() {
      this.numberList = []
      this.$fetch(api.tools_postion, {tools_id: this.applydetail.tools.id, p: this.page.pageindex}).then((response) => {
        if (response.code === 0) {
          this.teachlist = response.list.data
          this.page.total = response.list.total;
          for (let i in response.list.data) {
            this.numberList.push(0)
          }
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 确认教辅具
    submitCheckedFn() {
      let num_ = 0
      let data_ = []
      for (let i in this.numberList) {
        let array_ = {}
        if (isNaN(this.numberList[i]) == 0) {
          if (Number(this.teachlist[i].num) < Number(this.numberList[i])) {
            this.$message.error('超出第' + (Number(i) + 1) + '列库存,请重新填写！')
            return false
          }
        } else {
          this.$message.error('请检查输入正确数字！')
          return false
        }
        num_ += Number(this.numberList[i])
        array_.id = this.teachlist[i].id
        array_.number = this.numberList[i]
        data_.push(array_)
      }
      if (this.applydetail.number === num_) {
        if (this.flag) {
          this.flag = false
          let data_last = {}
          data_last.data = JSON.stringify(data_)
          data_last.apply_id = this.applydetail.id
          this.$post(api.tools_apply_distribution, data_last).then((response) => {
            if (response.code === 0) {
              this.$message({
                message: '分配成功！',
                type: 'success'
              })
              // this.$router.go(-1)
              this.flag = true
              this.$emit('InitFn')
              this.closePOpup()
            } else {
              this.$message.error(response.msg)
            }
          }).catch((err) => {
            console.log(err)
          })
        }
      } else {
        this.$message.error('填写数量于申请数量不对等,请重新填写！')
      }
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
  },
  mounted() {
  }
}
</script>

<style lang="scss">
.detailList {
  background: #fff;
  width: 90%;
  border-radius: 5px;
  box-shadow: 0 0 14px #ddd;
  padding: 30px 20px;
  margin: 30px auto 0;
}

.applybody-title-goods {
  padding: 10px 10px;

  span {
    font-weight: bold;
    color: #409EFF;
    font-size: 20px;
  }
}

.applybody-title {
  padding: 10px 10px 0;

  span {
    color: red;
  }
}

.h2box {
  font-weight: normal;
  font-size: 14px;
  padding: 10px;
  margin-top: 10px;
  background: #ecf5ff;
  display: flex;
  align-items: center;
  justify-content: center;

  span {
    flex: 1;
  }
}


.table-body-box {
  padding: 0 !important;
  margin: 0 !important;
}

.pagelist {
  margin: 10px 0 30px;
  border: 1px solid #eee;
}

.pagelist-list {
  display: flex;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  color: #333;

  span {
    flex: 1;
    border-right: 1px solid #ddd;

    &:first-child {
      font-size: 16px;
      font-weight: bold;
      color: red;
    }

    &:last-child {
      border-right: none;
    }

    input {
      height: 30px;
      line-height: 30px;
      border-radius: 3px;
      border: 1px solid #eee;
      text-indent: 10px;
    }
  }
}

.pagelist-list-title {
  background: #eee;

  span {
    &:first-child {
      font-weight: normal;
      font-size: 14px;
      color: #333;
    }
  }
}

.title-name-number {
  margin-top: 30px;
}

.title-name-number span {
  color: red;
  font-size: 16px;
  font-weight: bold;
}
</style>

